<script setup>
/**
 * @name 混剪预览(老版和阿里云用的都是这个)
 */
import {
  ref,
  onMounted,
  toRefs,
  computed,
  reactive,
  watch,
  nextTick,
  onUnmounted,
  watchEffect,
} from "vue";
// 加载中组件
import Loding from "./components/Loding.vue";
// 头部组件
import navBack from "../MixedCutPlatforms/components/navBack.vue";
// 定量选择弹窗
import QuantitativeChoice from "./components/QuantitativeChoice.vue";
// 生成视频弹窗
import saveVideoDialog from "./components/MemberRecharge.vue";
// 消耗提示弹窗
import ConsumptionHint from "@/views/shotstack/components/dialogComponent/ConsumptionHint.vue";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'

// icon
import {
  VideoCameraAddOutlined,
  CaretRightOutlined,
  PlayCircleOutlined,
  LoadingOutlined
} from "@ant-design/icons-vue";
// 路由
import { useRouter, useRoute } from "vue-router";
// 导入工具和模拟数据
import { filterArr } from "../MixedCutPlatforms/utools/index.js";
// 可编辑头部
import EditableHead from "@/views/shotstack/MuseMixedCut/components/EditableHead.vue";
// 仓库
import store from "@/store";
import awaitDialog from "@/views/shotstack/components/dialogComponent/awaitDialog.vue";

import utils from "@/common/utils/utils.js";
// 预览的手机相关数据
import Vue3DraggableResizable from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
// 封装的请求
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import MaterialsModule from "@/views/shotstack/components/MaterialsModule/index.vue";
import SaveVideo from "@/views/shotstack/MuseMixedCut/MixedCutPreview/components/SaveVideo.vue";
import { set } from "lodash";
import { onBeforeRouteLeave } from "vue-router";

const route = useRoute();
const router = useRouter();

// 读取配置, 阿里云或者原生
const work_ai_config = computed(() => {
  return store?.state?.shotstack?.work_ai_config || {};
});

const state = reactive({
  coverForm: {
    poster_url: "",
  },
  // 是否显示生成更多按钮
  more_show: true,
  // 生成最大的数量
  clip_one_max: 10,
  // 控制页面loading
  loading:false
});

// 路由参数
const routeQueryData = computed(() => {
  return {
    tip: route.query?.tip || "",
  };
});

// 初始化页面
const queryData = ref({
  id: "",
  page: 1,
  // pageSize: 10,
  pageSize: work_ai_config.value?.shotstack_driver == "alionline" ? 20 : 10,
  category: [],
  duration: [], // 待优化  点击掉接口
});
// 切换加载中状态
const isLoding = ref(false);
const loadingIng = ref(true);
const loadingIng_spain = ref(true);

// 是否预览完成
const previewComplete = ref(false);

// 勾选类型, 分为定量和常规勾选
const selectType = ref("");

// 当前列表返回的视频总量
const video_num = ref(0);
// 剩余剪辑次数数量
const splitNum = ref(0);
// 预估的总数据量
const videoAllnum = ref(0);

// 已生成的数量
const now_total = ref(0);

// 最后一页的数量信息
const lastPageData = computed(() => {
  // 最后一页
  const lastPage = Math.ceil(videoAllnum.value / queryData.value.pageSize);
  // 最后一页的数量(如果正好等于pageSize, 则返回pageSize)
  const lastPageNum =
    videoAllnum.value % queryData.value.pageSize || queryData.value.pageSize;
  return {
    lastPage,
    lastPageNum,
  };
});

// 是否展示占位符
const showCart = ref(true);

// 占位符卡片需要加载的数量
const cartNum = computed(() => {
  // 如果总数小于当前页面数量，则返回总数
  let num = now_total.value - allVideoData.value.length;
  return num;
});

watch(
  () => videoAllnum.value,
  (nv, ov) => {
    if (nv) {
      // total总量变化, 当前页码在最后一页, 并且变化之后 最后一页没有数据了, 将页码返回到total变化后的最后一页
      const lastPage = Math.ceil(nv / queryData.value.page);
      if (queryData.value.page > lastPage) {
        // debugger
        queryData.value.page = lastPage;
        getAllData();
      }
    }
  }
);


const clip_number = ref("")
const clip_max = ref("")


// 计算属性
const isButtonDisabled = computed(() => {
  if (clip_number.value) {
    return false; 
  }
  return checked_num.value === 0; 
}); 

const videoElement = ref(null);
const currentVideoUrl = ref("");

// 展示的视频列表
const showVideoData = ref([]);

// 可编辑标题
const titleText = computed(() => route.query.name + " - 预览");

// 高亮选中的项
const actives = ref([
  {
    name: "视频类型",
    activeList: [3],
  },
  {
    name: "视频时长",
    activeList: [0],
  },
]);

// 充值弹窗开关
const vipVisible = ref(false)

// 所有的视频数据, 包含勾选的信息
const allVideoData = ref([]);

// 存放所有的勾选数据
const setAllVideoData = (data, type = "add") => {
  
  // data.forEach(ele => {
  //   ele.status = 'failed'
  // })
  if (type == "cover") {
    allVideoData.value = data;
    return;
  }
  if (Array.isArray(data) && data.length == 0) {
    allVideoData.value = [];
    return;
  }
  // 存放数组数据
  if (Array.isArray(data) && data.length) {
    data.forEach((ele) => {
      const find = allVideoData.value.find((item) => item.id === ele.id);
      if (find) {
        find.checked = ele.checked;
      } else {
        allVideoData.value.push(ele);
      }
    });
  } else {
    // 存放单项数据
    const find = allVideoData.value.find((item) => item.id === data.id);
    if (find) {
      find.checked = data.checked;
    } else {
      allVideoData.value.push(data);
    }
  }
};

// 处理列表勾选事件
const handelChecked = (item) => {

  if (item?.status == 'failed') {
    item.checked = false
  } else {
    item.checked = !item.checked;
  }

  nextTick(() => {
    setAllVideoData(JSON.parse(JSON.stringify(item)));
  });
};

// 选择筛选项
const selectFilter = (item, type) => {
  let isIndex;
  type == "视频类型" ? (isIndex = 0) : (isIndex = 1);

  let target = actives.value[isIndex].activeList;

  if (type == "视频时长") {
    // 0代表点击的是'全部'按钮
    if (item.id == 0) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 0);
    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        target.splice(index, 1);
        target.length == 0 && target.push(0);
      } else {
        const zeroIndex = target.findIndex((ele) => ele == 0);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  } else {
    // loadingIng.value = false
    if (item.id == 3) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 3);
    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        // 选中的话 则删除此项, 如果删除之后数组为空 则'全部'按钮点亮
        target.splice(index, 1);
        target.length == 0 && target.push(3);
      } else {
        // 未选中的话 则点亮当前选项, 并且删除'全部'按钮的高亮
        const zeroIndex = target.findIndex((ele) => ele == 3);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  }

  if (type == "视频类型") {
    queryData.value.category = target;
  } else {
    queryData.value.duration = target;
  }

  if (queryData.value.duration[0] == 0) {
    queryData.value.duration = [];
  }
  if (queryData.value.category[0] == 3) {
    queryData.value.category = [];
  }

  showVideoData.value = [];
  queryData.value.page = 1;
  getAllData();
};

const radioType = computed(() => store.getters.clipJSON?.aspect_ratio);
// 加载效果
const loading = ref(false);
// 动态样式
const resizableStyle = computed(() => {
  return {
    backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(${state.coverForm.poster_url}), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
    backgroundSize: "100% auto",
    backgroundPosition: "center center",
    backgroundRepeat: "no-repeat",
    width: "360px",
    height:
      radioType.value == "1:1"
        ? "360px"
        : radioType.value == "16:9"
        ? "202.5px"
        : "640px",
  };
});

// 预览控制变量
const preview = ref(false);
// 当前预览的项
const previewItem = ref(null);
// 收起预览
const closePreview = () => {
  preview.value = false;
  previewItem.value = null;
};

// 展开预览
const showVideo_R = ref("");
const openPreview = (item) => {
  if(item?.status == 'failed') return
  preview.value = true;
  previewItem.value = item.id;
  showVideo_R.value = item.video_url;
};

// 底部视频卡片全选
const selectAll = () => {
  const isChecked = showVideoData.value.every((item) => item.checked);
  showVideoData.value.forEach((ele) => {
    ele.checked = !isChecked;
  });
  setAllVideoData(JSON.parse(JSON.stringify(showVideoData.value)));
};

// 定量选择
const dialog = ref(null); // 弹窗组件实例
const handleSelectVideo = () => {
  dialog.value && dialog.value.showModal();
};

const cloneCheckData = ref({
  checked_num: "",
  checkedIds: [],
});
const cloneChecked_num = ref(0);

// 定量选择 弹窗点击确定回调
const handleOk = async (val) => {
  // 缓存之前的勾选数量
  cloneCheckData.value.checked_num = JSON.parse(
    JSON.stringify(saveData.value.checked_num)
  );
  cloneCheckData.value.checkedIds = JSON.parse(
    JSON.stringify(checkedIds.value)
  );

  saveData.value.id = route.query.qid;
  saveData.value.checked_num = val;
  saveData.value.checkedIds = [];

  // 打开请确认生成弹窗
  if (val > 0) {
    // 设置勾选类型
    await getUserBalance(val);

    if (countData.value?.usable != 1) {
      // 打开充值弹窗
      vipVisible.value = true
      return
    }

    // 获取消耗提示词内容
    const content = utils.useText(countData.value)

    // 打开积分消耗提示
    await utils.kd({
      content,
      res:countData.value
    })
    
    selectType.value = "dignliang";
    saveVisible.value = true;

  } else {
    message.warn("请先选择视频!");
  }

  // for (let i = 0; i < val && i < allVideoData.value.length; i++) {
  //   allVideoData.value[i].checked = true;
  // }
  // // 同步更新渲染视频的选中状态
  // if (showVideoData.value.length) {
  //   nextTick(() => {
  //     showVideoData.value.forEach(ele => {
  //       const find = allVideoData.value.find(item => item.id == ele.id)
  //       find && (ele.checked = find.checked)
  //     })
  //   })
  // }
};

const onCancel = () => {
  resetSubmitData();
  saveVisible.value = false;
};

// 重置定量选择提交数据
const resetSubmitData = () => {
  if (
    cloneCheckData.value.checked_num != "" &&
    cloneCheckData.value.checkedIds.length
  ) {
    saveData.value.checked_num = JSON.parse(
      JSON.stringify(cloneCheckData.value.checked_num)
    );
    saveData.value.checkedIds = JSON.parse(
      JSON.stringify(cloneCheckData.value.checkedIds)
    );
    checkedIds.value = JSON.parse(
      JSON.stringify(cloneCheckData.value.checkedIds)
    );
  }
};

// 生成视频
const saveData = ref({
  id: "",
  // 勾选的数量
  checked_num: "",
  // 勾选的id数组
  checkedIds: "",
});
const saveVisible = ref(false);

// 点数信息
const countData = ref(null)

// 获取剪辑次数
const getUserBalance = async (number) => {
  if (clip_number.value) {
    number = clip_number.value
  }

  const res = await request.get(
    "/work_ai",
    "/user/shotstack/point/config/get",
    { number}
  );

  countData.value = res
};

// 确认保存, 打开文件夹选择
const isSubmit = () => {
  if (selectType.value != "dignliang") {
    saveData.value.checked_num = checked_num.value;
    saveData.value.checkedIds = checkedIds.value;
  } else {
    // 此值已经在定量选择弹窗中赋值过了
    // saveData.value.checked_num = val;
    // 定量不需要id 数组
    saveData.value.checkedIds = [];
  }
  // 判断完毕重置勾选类型
  selectType.value = "";
  saveData.value.id = route.query.qid;
  saveVisible.value = true;
};

// 保存混剪
const saveVideo = async () => {
  if (checked_num.value <= 0 && !clip_number.value) return message.warn("请先选择视频!");

    await getUserBalance(checked_num.value);

    if (countData.value?.usable != 1) {
      // 打开充值弹窗
      vipVisible.value = true
      return
    }

    saveData.value.id = route.query.qid;
    saveData.value.checked_num = checked_num.value;
    saveData.value.checkedIds = checkedIds.value;

    // 获取消耗提示词内容
    const content = utils.useText(countData.value)

    // 打开积分消耗提示
    await utils.kd({
      content,
      res:countData.value
    })

    saveVisible.value = true

    console.log(content, '积分消耗提示');
};

const maxlength = ref(0);
const video_isdoning = ref(0);
// 初始化页面
const initData = async () => {
  queryData.value.id = route.query.qid;
  isLoding.value = false;
};

const handlePageChange = (page, pageSize) => {
  queryData.value.page = page;
  getAllData();
};

// 轮训列表数据
const timerId = ref(null);

const getAllData = async () => {
  if (timerId.value) {
    clearInterval(timerId.value);
  }

  try {
    const res = await request.get(
    "/work_ai",
    `/user/shotstack/preview/list`,
    queryData.value
  );

  // 是否预览完成
  previewComplete.value = res.result.previewComplete;

  if (res.result.all_done == false) {
    // 视频还在生成  继续轮训
    loadingIng.value = true;
    loadingIng_spain.value = true;

    timerId.value = setTimeout(() => {
      getAllData();
      // return;
    }, 5000);
  } else {
    loadingIng.value = false;
    loadingIng_spain.value = false;
    isTotalquest.value == false;
    maxlength.value = res.result.total;
    updateFilterValues(res.result);
    // addTip();
  }

  await getTotal();
  // 带搜索条件, 不展示占位符
  if (queryData.value.category.length || queryData.value.duration.length) {
    showCart.value = false;
  } else {
    showCart.value = true;
  }

  if (res.result.data.length > 0) {
    const nowArr = res.result.data.map((ele) => {
      // return
      const find = allVideoData.value.find((item) => item.id === ele.id);
      let category;
      if (Array.isArray(tipAll.value) && tipAll.value.length) {
        category =
          tipAll.value.find((val) => val.shotstack_id == ele.id)?.category ||
          null;
      }
      return {
        ...ele,
        checked: !!find ? find.checked : false,
        category: category || null,
      };
    });

    // 视频打标签
    updateFilterValues(res.result);
    showVideoData.value = nowArr;
    // 携带搜索条件
    if (!showCart.value) {
      setAllVideoData(JSON.parse(JSON.stringify(nowArr)), "cover");
    } else {
      setAllVideoData(JSON.parse(JSON.stringify(nowArr)));
    }
    // 存放勾选状态
  } else {
    setAllVideoData([]);
    showVideoData.value = [];
  }
  video_isdoning.value = res.result.total;
  video_num.value = res.result.total;
  } catch (error) {
    if (timerId.value) {
    clearInterval(timerId.value);
    }
    loadingIng.value = false;
    loadingIng_spain.value = false;
    state.loading = false
  }

  return;

  if (res.result.data.length > 0) {
    const nowArr = res.result.data.map((ele) => {
      // return
      const find = allVideoData.value.find((item) => item.id === ele.id);
      let category;

      if (Array.isArray(tipAll.value) && tipAll.value.length) {
        category =
          tipAll.value.find((val) => val.shotstack_id == ele.id)?.category ||
          null;
      }
      return {
        ...ele,
        checked: !!find ? find.checked : false,
        category: category || null,
      };
    });

    setAllVideoData(JSON.parse(JSON.stringify(nowArr)));
    showVideoData.value = JSON.parse(JSON.stringify(nowArr));
    // 视频打标签
    updateFilterValues(res.result);

    // 处理每个卡片 底下的展示小卡片

    // showVideoData.value.forEach((v1) => {

    //   if (v1.resources.length) {
    //     v1.resources.forEach((v2) => {
    //       if (v2.type == "video") {
    //       }
    //     });
    //   }
    //   // currentVideoUrl.value = v1.video_url;
    //   // if (videoElement.value) {
    //   //   videoElement.value.load();
    //   // }
    // });
  }

  if (res.result.all_done == false) {
    // 视频还在生成  继续轮训

    if (showVideoData.value.length < queryData.value.pageSize) {
      loadingIng.value = true;
      loadingIng_spain.value = true;
    } else {
      // loadingIng.value = false;
      // loadingIng_spain.value = false
    }
    timerId.value = setTimeout(() => {
      getAllData();
      return;
    }, 5000);
  } else {
    loadingIng.value = false;
    loadingIng_spain.value = false;
    // 成功了
    maxlength.value = res.result.total;
    isTotalquest.value == false;
    updateFilterValues(res.result);
    // addTip();
  }
};

// 视频打上标签
const updateFilterValues = (result) => {
  filterArr.value[0].items[0].num =
    result.category_common +
    result.category_repetition_low +
    result.category_repetition_low_extremely;
  filterArr.value[0].items[3].num = result.category_common;
  filterArr.value[0].items[2].num = result.category_repetition_low;
  filterArr.value[0].items[1].num = result.category_repetition_low_extremely;
};
const timerIds = ref(null);
const tipAll = ref([]);
// 获取视频类型 接口
const videoType = async () => {
  timerIds.value && clearTimeout(timerIds.value);
  const res = await request.get("/work_ai", `/user/shotstack/category`, {
    id: route.query.qid,
  });
  if (res.result.all_done == false) {
    tipAll.value = res.result.list;
    addTip();
    // 视频还在生成  继续轮训
    timerIds.value = setTimeout(() => {
      videoType();
      return;
    }, 5000);
  } else {
    tipAll.value = res.result.list;
    addTip();
  }
};

// 添加标签的方法
const addTip = () => {
  if (allVideoData.value.length > 0 && tipAll.value.length > 0) {
    allVideoData.value.forEach((ele) => {
      if (!ele.category) {
        const find = tipAll.value.find((v2) => v2.shotstack_id == ele.id);
        ele.category = find ? find.category : null;
      }
    });
  }
};

// watchEffect(() => {
//   if (tipAll.value.length > 0 && allVideoData.value.length > 0) {
//     // 对showVideoData进行更新，将匹配到的category添加进去
//     allVideoData.value.forEach(ele => {
//       if (!ele.category) {
//         const find = tipAll.value.find((v2) => v2.id == ele.id);
//         ele.category = find ? find.category : null;
//       }
//     })
//   }
// });

// 正在切片 接口

const istimeloading = ref(true);
const flag = ref(false);

const isTotalquest = ref(true);

// total 时间开关
const timeloading = ref(null);

// 获取 total
const getTotal = () => {
  return new Promise(async (resolve, reject) => {
    const res = await request.get("/work_ai", `/user/shotstack/preview/total`, {
      id: route.query.qid,
    });
    console.log(res,'getTotal 启动');
    
    // console.log(res, "totaltotaltotaltotal");
    videoAllnum.value = res.total || 0;
    now_total.value = res?.now_total || 0;
    res?.total >= 1 && (istimeloading.value = false);
    clip_max.value = res.total || 1
    // 是否显示 生成更多
    state.more_show = res?.more_show == 1
    // 选择成片的 最大数量
    state.clip_one_max = res?.clip_one_max || 10

    if (clip_max.value > 1000) {
      clip_max.value = 1000
    }
    gettuijianInfo(res)
    resolve(res);
  });
};

const LoadingType = async (init = false) => {
  // clearTimeout(timeloading.value);

  // 获取 total
  try {
    const res = await getTotal();
  
    if (res?.now_total == 0) {
      // 获取轮询是否能够获取更多
      const can_more = await canGetMore(init);
      can_more && creatMore(init);
    } else {
      // 已经有数据 - 获取列表
      queryData.value.pageSize = res?.now_total || 1000;
      getAllData();
    }
  
    videoType();

  } catch {
    state.loading = false
  }
  // if (!flag.value) {
  //   flag.value = true;
  // }

  return;
  if (res && res.total == 0) {
    // 视频还在生成  继续轮训
    timeloading.value = setTimeout(() => {
      LoadingType();
      return;
    }, 5000);
  } else if (res && res.total > 0) {
    videoAllnum.value != res.total && (videoAllnum.value = res.total);
    istimeloading.value = false;

    if (!flag.value) {
      getAllData();
      videoType();
      flag.value = true;
    }

    if (loadingIng.value == true) {
      timeloading.value = setTimeout(() => {
        LoadingType();
      }, 5000);
    }
  }

  // setTimeout(() => {
  //   videoAllnum.value = 6
  //   loadingIng.value = false
  // }, 5000)
};

// 是否可以获取更多, 轮询开关
const time_getMore = ref("");
const canGetMore = (init = false) => {
  return new Promise(async (resolve, reject) => {
    const is_can = async () => {
      clearTimeout(time_getMore.value);
      if(route.name != 'MixedCutPreview') return 
      try {
        let url = init
          ? `/user/shotstack/producing/preview/create/can?id=${route.query.qid}&preview_num=${route.query?.preview_num}`
          : `/user/shotstack/producing/preview/create/can?id=${route.query.qid}`;
        const res = await request.get("/work_ai", url);
        console.log(res, "是否可以获取更多");
        if (res?.result) {
          resolve(res?.result);
        } else {
          time_getMore.value = setTimeout(() => {
            is_can();
          }, 1500);
        }
      } catch (error) {
        !!time_getMore.value && clearTimeout(time_getMore.value);
        time_getMore.value = "";
        message.warning("获取数据失败");
        reject(false);
      }
    };
    is_can();
  });
};

const creatMore_loding = ref(false);
// 生成更多
const creatMore = async (init = false) => {
  if (creatMore_loding.value) return 
  // 前端手动控制 是否预览完成 改为false
  previewComplete.value = false
  // 已经没有更多可以获取了
  creatMore_loding.value = true;
  try {
    await getTotal();
    if (now_total.value != 0 && now_total.value == videoAllnum.value)
      return message.warning("无法生成更多啦!");

    let url = init
      ? `/user/shotstack/producing/preview/create?id=${route.query.qid}&preview_num=${route.query?.preview_num}`
      : `/user/shotstack/producing/preview/create?id=${route.query.qid}`;
    const res = await request.post("/work_ai", url);
    console.log(res, "生成更多生成更多生成更多");
    queryData.value.page = 1;
    queryData.value.pageSize = res.result?.now_total || 1000;
    getAllData();
    videoType();
  } finally {
    creatMore_loding.value = false;
  }
};

// 计算当前视频项是否全选
const isAllselect = computed(() => {
  return allVideoData.value.every((item) => item.checked);
});

// 计算当前视频项选中的个数
const checked_num = computed(() => {
  return allVideoData.value.filter((item) => item.checked).length;
});

const checkedIds = computed(() => {
  return allVideoData.value
    .filter((item) => item.checked)
    .map((item) => item.id);
});

// 选择文件夹 的保存按钮  在这调生成高质量视频的接口
const saveName = ref({});
// 生成高质量视频
const finshaData = ref({
  id: route.query.qid,
  shotstack_response_num: "",
  shotstack_response_ids: "",
  folder_id: "",
  clip_number: ""
});

// 点击确定
const awaitModel = ref(null);
const saveFn = async(options, id) => {

  tuijianList.value.forEach(item => {
    if (item.value == nowtuijian_value.value) {
      if (clip_number.value !== item.num) {
        nowtuijian_value.value = ""
      }
    }
  })

  finshaData.value.folder_id = id;
  finshaData.value.shotstack_response_num = saveData.value.checked_num;
  finshaData.value.shotstack_response_ids = saveData.value.checkedIds;
  finshaData.value.clip_number = clip_number.value;
  finshaData.value.recommend_value = nowtuijian_value.value;

  try {
    const res = await request.put("/work_ai", `/user/shotstack/preview/high`, finshaData.value)
    if (res?.code && res?.code != 1000) {
      // 请求失败
      throw new Error(res?.msg || '生成视频失败!')
    } 
    // 请求成功!
    awaitModel.value && awaitModel.value.showModal();
  } catch (error) {
    console.log(error,'错误对象');
    message.warn(error.msg);
  } finally {
    saveVisible.value = false;
  }
};

const videoContentBoxRef = ref(null);
const items = ref([]);
const page = ref(1);

// 页面卸载时清理定时器
onUnmounted(() => {
  // window.removeEventListener("scroll", () => { })
  filterArr.value[0].items[0].num = 0;
  filterArr.value[0].items[3].num = 0;
  filterArr.value[0].items[2].num = 0;
  filterArr.value[0].items[1].num = 0;

  if (timerId.value !== null) {
    clearInterval(timerId.value);
  }
  timerId.value = null;

  if (timerIds.value !== null) {
    clearInterval(timerIds.value);
  }
  timerIds.value = null;

  if (timeloading.value !== null) {
    clearTimeout(timeloading.value);
  }

  clearTimeout(time_getMore.value);

  timeloading.value = null;
});

// 点击返回
const backClick = () => {

  // 还没结束 => 返回列表页
  if (previewComplete.value == false) {
    router.push({
      name: 'MixedCutIntroduction'
    });
  } else {
    // 结束了 => 返回编辑页
    router.push({
      name :'mixedCutCreat'
    });
  }
};

// 退回混剪列表页
const backliebiao = () => {
  router.push("/workShotstack/creationCenter/MixedCutIntroduction");
};

const tuijianList = ref([
  // {
  //   name: "推荐成片 :",
  //   num: "",
  //   value: "",
  //   used_count: ""
  // },
  //  {
  //   name: "低重复 :",
  //   num: "",
  //   value: "",
  //   used_count: ""
  // },
  //  {
  //   name: "差异度大成片 :",
  //    num: "",
  //    value: "",
  //   used_count: ""
  // },
  //  {
  //    name: "完全不重复 :",
  //   num: "",
  //    value: "",
  //   used_count: ""
  // }
])

const pollInterval = ref(null)
const is_showtuijian = ref(false)
const gettuijianInfo = async (data=null) => {
  stopPolling();
  try {
    let res
    if (!data) {    
      console.log('gettuijianInfo, 轮询');
       res = await request.get("/work_ai", `/user/shotstack/preview/total`, {
        id: route.query.qid,
      });
    } else {
      res = data
    }

    // 赋值推荐操作
    if (Array.isArray(res.recommend?.show_array)) {
      tuijianList.value = res.recommend.show_array.map(ele => {
        return {
          name: `${ele.label}：`,
          num: ele.count,
          value: ele.value,
          used_count: ele.used_count
        }
      })
    }

    if (res.recommendStatus === "done") {
      // // 赋值操作
      // tuijianList.value[0].num = res.recommend.recommend.count;
      // tuijianList.value[0].value = res.recommend.recommend.value;
      // tuijianList.value[0].used_count = res.recommend.recommend.used_count;

      // tuijianList.value[1].num = res.recommend.low_repetition_ratio.count;
      // tuijianList.value[1].value = res.recommend.low_repetition_ratio.value;
      // tuijianList.value[1].used_count = res.recommend.low_repetition_ratio.used_count;


      // tuijianList.value[2].num = res.recommend.low_ratio.count;
      // tuijianList.value[2].value = res.recommend.low_ratio.value;
      // tuijianList.value[2].used_count = res.recommend.low_ratio.used_count;

      // tuijianList.value[3].num = res.recommend.no_repeat.count;
      // tuijianList.value[3].value = res.recommend.no_repeat.value;
      // tuijianList.value[3].used_count = res.recommend.no_repeat.used_count;

      is_showtuijian.value = true;
    } else {
      pollInterval.value = setTimeout(() => gettuijianInfo(), 5000);
    }
  } catch (error) {
  }
};

const stopPolling = () => {
  console.log('停止轮训ssssss');
  if (pollInterval.value) {
    clearTimeout(pollInterval.value);
    pollInterval.value = null;
  }
};

// gettuijianInfo()

const nowtuijian_value = ref("")
const all_click = (info) => {
  clip_number.value = info.num
  nowtuijian_value.value = info.value
  message.success('选用成功!')
  nextTick(() => {
    const inputNumber =document.getElementById('inputNumber')
    inputNumber?.focus()
  })
}

onBeforeRouteLeave((to, from, next) => {

  // console.log(to, from, next, '从哪儿来的??');

  console.log(back.value, 'back.value');

  // 还没结束 或者从列表页来的 => 返回列表页, 
  if ((previewComplete.value == false || back.value == 'MixedCutIntroduction') && to.name != 'ComposeMaterial') {
    to.name != 'MixedCutIntroduction' && next({
      name: 'MixedCutIntroduction'
    });
  } else if(to.name != 'ComposeMaterial' && to.name != 'MixedCutIntroduction') {
    // 结束了 => 返回编辑页
    to.name != 'mixedCutCreat' && next({
        name: 'mixedCutCreat'
    });
  }
  
  // 保存之后的跳转, 允许正常跳转
  if (to.name == "ComposeMaterial" || to.name == "MixedCutIntroduction") {
    next(true);
    return;
  }

  // debugger;
  // 退回的页面必须为mixedCutCreat 并且要有参数, 并且不能有isAi参数
  if (
    to.name == "mixedCutCreat" &&
    !!Object.keys(to.query).length &&
    !to.query.isAi
  ) {
    next(true);
    return;
  }
  if (route.query.isAi == "true") {
    router.push(
      `/mixedCutCreat?id=${route.query.qid}&key=id&viewType=2&openType=edit`
    );
  } else {
    let baseQuery = `id=${route.query.qid}`;
    const dynamicQueryParams = Object.keys(route.query)
      .filter((key) => key !== "id" && key !== "qid")
      .map((key) => `${key}=${encodeURIComponent(route.query[key])}`);

    if (!dynamicQueryParams.some((param) => param.startsWith("key="))) {
      dynamicQueryParams.push(`key=id`);
    }
    const fullQuery =
      dynamicQueryParams.length > 0
        ? `?${baseQuery}&${dynamicQueryParams.join("&")}`
        : `?${baseQuery}`;
    router.push(`/mixedCutCreat${fullQuery}`);
  }
  next(false);
});

watch(() => cartNum.value, (nv, ov) => {
  console.log(nv,'占位卡片的数量???');
  if (nv >= 1) {
    state.loading = false
  }
})

const back = ref('')

// 模拟加载
onMounted(() => {
  back.value = route.query.back
  state.loading = true
  LoadingType(true);
  initData();
  // nextTick(() => {
  //   awaitModel.value?.showModal()
  // })
});
</script>

<template>
  <a-config-provider prefix-cls="ss">
    <div class="MixedCutPreview">

      <div class="note_data" v-if="state.loading">
      <div class="loding_content">
        <LoadingOutlined class="loding_icon"></LoadingOutlined>
          <span class="loding_tips">加载中...</span>
      </div>
    </div>

      <template v-if="isLoding">
        <Loding />
      </template>
      <template v-else>
        <!-- 头部组件 -->
        <navBack @backClick="backClick" :contentConfig="{
            title: '混剪项目2024/3/28',
            isShow: true,
          }" :leftConfig="{
            isShow: true,
          }" :rightConfig="{
            isShow: true,
            content: '',
          }">
          <template #content_text>
            <EditableHead :titleText="titleText" :disabled="true"></EditableHead>
          </template>
          <template #right_btns>

            <div style="margin-right: 20px;">
              <!-- <template v-if="loadingIng">
                预计最多可生成视频: {{ videoAllnum }}，  已生成视频: ({{ video_isdoning }})
              </template>   
              <template v-else>
                预计最多可生成视频: {{ videoAllnum }}，  当前视频数量 ({{ video_num }})
              </template> -->
            </div> 


            生成条数: <a-input-number id="inputNumber" v-model:value="clip_number" :min="1" :max="clip_max" addon-after="个" />
            <a-button type="primary" :disabled="isButtonDisabled" @click="saveVideo">
              <div style="border-radius: 8px; overflow: hidden">
                <VideoCameraAddOutlined />
                <span style="margin-left: 7px">生成视频</span>
              </div>
            </a-button>
          </template>
        </navBack>

        <!-- {{ saveData.checked_num + 'saveData.value' }}
        <br>
        {{ saveData.checkedIds + 'saveData.value' }} -->

        <!-- 下方整体 -->
        <div class="content_box">
          <div class="left_content_box">
            <div class="content_box_mind">
              <!-- 筛选框 -->
              <div class="filter_box">
                <div class="left">

                                  <!-- class="right" style="width: 22%;" -->
                <div style="margin-bottom: 10px;">
                  
                  <div v-show="is_showtuijian" class="tuijian_box">
                    <div style="padding-left: 6px;">
                    <template v-if="loadingIng">
                      预计最多可生成视频: <span class="numberFontSize">{{ videoAllnum }}</span>，已生成视频: <span class="numberFontSize">{{ video_isdoning }}</span>
                    </template>   
                    <template v-else>
                      预计最多可生成视频: <span class="numberFontSize">{{ videoAllnum }}</span>，当前视频数量  <span class="numberFontSize">{{ video_num }}</span>
                    </template>
                    </div> 
                    <template v-if="tuijianList.length">                      
                      <div class="tuijian_box_item" v-for="(item, index) in tuijianList">
                       <div class="left">
 
                         <div class="left_content" v-if="item.used_count == 0">
                            <div class="left_name">{{ item.name }}</div>
                          <span class="numberFontSize"> {{ item.num }}</span>
                         </div>
                         <div v-else>
                           <a-popover placement="top">
                            <template #content>
                           
                             <p>已生成数量（{{ item.used_count }}）</p>
                            </template>
                              <div class="left_content_s">
                                 <div class="left_name">{{ item.name }}</div>
                          <span class="numberFontSize"> {{ item.num }}</span>
                             </div>
                             
                         
                          </a-popover>
                         </div>
                        
                       </div>
                       <div class="right">
                          <a-button type="link" :disabled="item.num == 0" @click="all_click(item)">全部选用</a-button>
                       </div>
                     
                     </div>
                    </template>

                  </div>
                </div>

                   <!-- <div class="filter_item" style="margin-bottom: 16px">
                  <span class="filter_title">视频类型</span>
                  <div class="select_item_box">
                    <div :class="{
                        active_select: actives[0].activeList.includes(ele.id),
                      }" class="select_item" @click="selectFilter(ele, '视频类型')" v-for="ele in filterArr[0].items"
                      :key="ele.id">
                      {{ ele.name }} ({{ ele.num }})
                    </div>
                  </div>
                </div> -->

                <div class="filter_item">
                  <span class="filter_title">视频时长</span>
                  <div class="select_item_box">
                    <div class="select_item" :class="{
                        active_select: actives[1].activeList.includes(ele.id),
                      }" @click="selectFilter(ele, '视频时长')" v-for="ele in filterArr[1].items" :key="ele.id">
                      {{ ele.name }}
                    </div>
                  </div>
                </div>

                </div>
               
              </div>
              <!-- 选择和操作栏 -->
              <div class="selection_and_operation">
                <div class="left_content">
                  {{ nowvideo }}

                  <!-- <a-button type="link">低重复率视频少？点击查看解决方案</a-button>/ -->
                </div>
                <div class="right_content">
                  <span>已选择
                    <span class="select_num">{{ checked_num }}</span>
                    个视频</span>
                  <a-button class="right_content_btn" type="primary" @click="handleSelectVideo">定量选择</a-button>
                  <a-button class="right_content_btn" type="primary" @click="selectAll">{{ isAllselect ? "取消全选" : "全选"
                    }}</a-button>
                </div>
              </div>
              <!-- 底部视频整体 @scroll="handleScroll" -->
              <div class="video_content">
                <div class="video_content_box" ref="videoContentBoxRef">
                  <!-- showVideoData -->
                  <template v-if="allVideoData.length">
                    <div v-for="i in allVideoData" :key="i.id" class="video_item video_img_cart"
                      :class="{ active_video_item: i.id == previewItem }" @click="handelChecked(i)">
                      <!-- 右上角标签 -->

                      <!-- 中间的预览 -->
                      <div style="height: 100%" class="box">
                        <span class="right_tag">{{ i.category }}</span>
                        <!-- 左上角勾选 -->
                        <a-checkbox :disabled="i?.status == 'failed'" @click.stop="handelChecked(i)" class="checkbox_item"
                          v-model:checked="i.checked"></a-checkbox>
                        <PlayCircleOutlined v-if="i?.status != 'failed'" class="play_icon" @click.stop="openPreview(i)"></PlayCircleOutlined>
                        <div class="failed" v-if="i?.status == 'failed'">
                          <span>生成失败</span>
                        </div>
                        <img v-else-if="i.poster_url" :src="i.poster_url" alt="" style="width: 100%; height: 100%" />
                        <!-- <video v-if="i.video_url" style="height: 100%" :src="i.video_url"></video> -->
                        <div v-else="
                            !i.poster_url && !!i?.resources?.[0]?.material_url
                          " class="bg-b">
                          <video v-if="i?.resources?.[0]?.type == 'video'" style="width: 100%; height: 100%"
                            :src="i.resources?.[0]?.material_url"></video>
                          <div v-else class="video_img_cartss" :style="`background-image: url(${i.resources?.[0]?.material_url}); background-size: cover;
                          background-repeat: no-repeat;
                          background-position: center;
                            `"></div>
                        </div>
                      </div>
                      <!-- 底部同组卡片展示 临时屏蔽-->
                      <div class="bottom_card_box" v-if="false">
                        <template v-if="i.resources.length">
                          <div class="bottom_card_item video_img_cart" v-for="v1 in i.resources.slice(0, 4)"
                            :key="v1.id">
                            <video v-if="v1.type == 'video'" style="width: 36px; height: 100%"
                              :src="v1.material_url"></video>
                            <div v-else class="bottom_card_item video_img_cart"
                              :style="`background-image: url(${v1.material_url});`"></div>
                          </div>
                          <!-- :getPopupContainer="(triggerNode) => {return triggerNode.closest('.bottom_card_box');}" -->
                          <a-popover trigger="click" placement="bottomLeft">
                            <template #content>
                              <div class="insert-card">
                                <div class="horver_box">
                                  <div class="horver_item" v-for="v1 in i.resources.slice(4)" :key="v1.id">
                                    <video v-if="v1.type == 'video'" style="width: 100%; height: 100%"
                                      :src="v1.material_url"></video>
                                    <div v-else class="bottom_card_item video_img_cart"
                                      :style="`background-image: url(${v1.material_url}); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 100%`">
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </template>
                            <div @click.stop="() => {}" class="bottom_card_info" v-if="i.resources.length > 5">
                              +{{ i.resources.length - 4 }}
                            </div>
                          </a-popover>
                        </template>
                      </div>
                    </div>
                  </template>

                  <template v-if="cartNum >= 1 && showCart">
                    <div class="loding_item" v-for="i in cartNum" :key="i">
                      <div class="loding_progress">
                        <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                            '0%': '#108ee9',
                            '100%': '#87d068',
                          }" status="active" />
                      </div>
                      <span class="loding_text">生成中, 预计还需2分钟</span>
                      <div class="loding_dec">
                        <span>
                          <LoadingOutlined></LoadingOutlined>
                        </span>
                        <span class="loding_dec_text">正在合成视频......</span>
                      </div>
                    </div>
                  </template>

                  <!-- 生成更多按钮 -->
                  <div class="loding_item creat_more_box" v-if="state.more_show" @click="creatMore(false)">
                    <div class="creat_more">
                      <span> + </span>
                    </div>
                    <span class="loding_text"></span>
                    <div class="loding_dec">
                      <span class="creat_more_text">生成更多</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 分页器 -->
              <!-- <a-pagination
                style="margin: 32px 0"
                @change="handlePageChange"
                v-model:current="queryData.page"
                v-model:pageSize="queryData.pageSize"
                :total="videoAllnum"
                show-size-changer
              /> -->
            </div>
          </div>
          <!-- 视频预览 -->
          <transition name="fade">
            <!-- v-show="preview" -->
            <div class="video_preview" v-show="preview">
              <div class="preview_heider">
                <h2>视频预览</h2>
                <span @click="closePreview">收起预览
                  <CaretRightOutlined />
                </span>
              </div>
              <div style="color: red; font-size: 14px; margin-bottom: 5px">
                预览播放低像素视频，正式生成会产出高像素视频
                <br />
                预览视频暂不支持转场效果, 不影响最终成片合成
              </div>
              <div id="phoneConCover" class="left_phone_view">
                <a-spin style="width: 100%; height: 640px; z-index: 1000" :spinning="loading">
                  <video style="width: 100%; height: 100%" controls autoplay :src="showVideo_R" preload="auto"></video>

                  <!-- <video style="width: 100%; height: 100%" controls autoplay preload="auto">
                    <source :src="showVideo_R" type="video/mp4" @error="handleVideoError" />
                    <source :src="showVideo_R" type="video/quicktime" />
                    <source :src="showVideo_R" type="video/mpeg" />
                    <source :src="showVideo_R" type="video/3gpp" />
                  </video> -->

                  <DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
                    <Vue3DraggableResizable v-show="item.copywriting" v-for="(item, index) in coverList"
                      :key="'art_con' + index" :initW="coverList[index].width" :initH="coverList[index].height"
                      v-model:x="coverList[index].elLeft" v-model:y="coverList[index].elTop"
                      v-model:w="coverList[index].width" v-model:h="coverList[index].height"
                      v-model:active="coverList[index].active" :draggable="true" :resizable="true" :parent="true">
                      <div @click.stop="getPosition(index)" :style="coverStyle(item, index)">
                        {{ item.copywriting }}
                      </div>
                    </Vue3DraggableResizable>
                  </DraggableContainer>
                </a-spin>
              </div>
            </div>
          </transition>
        </div>
      </template>
      <!-- 定量选择 弹窗 -->
      <QuantitativeChoice ref="dialog" @handleOk="handleOk" :max="maxlength"></QuantitativeChoice>
      <!-- 保存视频弹窗 -->
      <awaitDialog ref="awaitModel" @isClose="resetSubmitData"></awaitDialog>

      <!-- 视频预加载 -->
      <video ref="videoElement" style="display: none" muted controls autoplay preload="auto"
        :src="currentVideoUrl"></video>
      <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
      <MaterialsModule ref="materials" jobCategory="videoSplit" :aisave="true" :requestType="true"
        :material_type="'video'" :isFlaking="true" @saveName="saveFn" @selfRequest="saveVideoData"
        :visible="saveVisible" :data="currentSaveData" @onCancel="onCancel" />
    </div>
  </a-config-provider>

  <!-- 消耗提示组件 -->

  <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

  <!-- 生成批量预览等待弹窗 -->
  <!-- <a-modal :footer="null" :maskClosable="false" :closable="false" class="tipModal"
    style="border-radius: 10px;overflow: hidden;" width="340px" centered v-model:visible="state.visibleTipModal"
    @ok="handleOk">
    <p style="margin-top: 10px;font-size: 14px;color: red;">预览视频正在处理中，请耐心等待，也可以返回混剪首页进行其他操作，后台将继续为您处理预览任务</p>
    <span style="display: flex; align-items: center;justify-content: center;">
      <a-spin :indicator="indicator" style="margin-right: 10px;display: flex;align-items: center;" />
      <span style="font-size: 16px;font-weight: 600;">预览处理中...</span>
    </span>
    <div style="display: flex;justify-content: space-between;">
      <a-button type="link" @click="state.visibleTipModal = false">继续等待</a-button>
      <a-button type="link" @click="backliebiao">返回列表</a-button>
    </div>
  </a-modal> -->
</template>

<style lang="less" scoped>

// 加载中 模态框
.note_data{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  .loding_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    .loding_tips{
      font-size: 20px;
      font-weight: bold;
    }
    .loding_icon{
      font-size: 30px;

    }
  }
}

// 给预览的元素显示和隐藏添加过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

// 手机样式
.left_phone_view {
  width: 330px;
  height: 730px;
  // flex: 1;
  background-color: #000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}

.MixedCutPreview {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content_box {
    flex: 1;
    display: flex;
    // overflow: hidden;
    overflow-y: auto;

    // 视频图片卡片公用样式
    .video_img_cart {
      transition: all 0.2s ease 0s;
      border-radius: inherit;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    // 视频预览
    .video_preview {
      padding: 26px 50px;
      display: flex;
      flex-direction: column;
      background: #f6f7fb;

      .preview_heider {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;

        h2 {
          color: #1c1f23;
          font-size: 16px;
          font-weight: 600;
          margin: 0;
        }

        span {
          font-size: 14px;
          color: #1c1f2399;
          cursor: pointer;
        }
      }

      .left_phone_view {
        // flex: 1;
        height: 750px;
      }
    }

    .left_content_box {
      flex: 1;
      min-width: 740px;
      padding: 15px;
      display: flex;
      flex-direction: column;

      .content_box_mind {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        // 视频预览列表
        .video_content {
          flex: 1;
          display: flex;
          overflow: hidden;

          // overflow-y: auto;
          .video_content_box {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            // width: 1850px;
            // width: 1650px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(155px, 155.13px));
            grid-auto-rows: 280px;
            grid-gap: 25px;
            padding: 10px;
            padding-right: 10px;
            position: relative;

            &::-webkit-scrollbar {
              cursor: pointer;
              width: 8px;
            }

            &::-webkit-scrollbar-thumb {
              background: #888;
              /* 滑块的背景颜色 */
              border-radius: 10px;
              /* 滑块的圆角 */
            }

            .loding_item {
              height: 100%;
              width: 100%;
              background-color: #ebebeb;
              align-items: center;
              padding: 15px;
              position: relative;
              overflow: hidden;
              cursor: pointer;
              border-radius: 5px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 10px;
              border: 1px solid transparent;

              .loding_progress {
                width: 100%;
              }

              .loding_text {
                font-weight: 600;
              }

              .loding_dec {
                .loding_dec_text {
                  color: #9b9b9b;
                  margin-left: 5px;
                }
              }
            }

            // 生成更多
            .creat_more_box {
              transition: all 0.3s;

              &:hover {
                border-color: #1759dd;
              }

              .creat_more {
                width: 100%;
                display: flex;
                justify-content: center;

                span {
                  font-size: 30px;
                }
              }

              .creat_more_text {
              }
            }

            .video_item {
              position: relative;
              overflow: hidden;
              cursor: pointer;
              border: 2px solid #ffffff;
              border-radius: 3px;
              border: 1px solid transparent;

              .failed{
                background-color: #000;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--ss-error-color);
                font-weight: bold;
              }

              .box {
                // position: relative;

                &:hover {
                  & .play_icon {
                    opacity: 1;
                    z-index: 99;
                  }
                }

                // 播放按钮
                .play_icon {
                  font-size: 50px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: var(--ss-tag-bgc-color);
                  transition: all 0.4s;
                  opacity: 0;
                  z-index: -99;

                  &:hover {
                    color: var(--ss-primary-color);
                  }
                }
              }

              // max-width: 220px;

              .bottom_card_box {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 20%;
                width: 100%;
                background: rgba(2, 8, 20, 0.8);
                display: flex;
                padding: 3px;
                align-items: center;
                // flex-wrap: nowrap;
                justify-content: flex-start;
                gap: 3px;
                overflow: hidden;
                z-index: 10;

                // overflow-x: auto;
                // padding-bottom: 4px;

                // &::-webkit-scrollbar {
                //     cursor: pointer;
                //     height: 4px;
                //     /* 滚动条的高度，垂直滚动条可能用得上 */
                // }

                // &::-webkit-scrollbar-thumb {
                //     cursor: grab;
                //     background: #888;
                //     /* 滑块的背景颜色 */
                //     border-radius: 10px;
                //     /* 滑块的圆角 */

                // }

                .bottom_card_item {
                  flex-shrink: 0;
                  width: 36px;
                  height: 100%;
                }
              }

              .bottom_card_info {
                position: absolute;
                color: #fff;
                bottom: 4px;
                right: 1px;
                width: 37px;
                height: 49px;
                line-height: 49px;
                text-align: center;
              }

              // 左上角勾选
              .checkbox_item {
                position: absolute;
                left: 5px;
                top: 5px;
              }

              // 右上角标签
              .right_tag {
                width: 70px;
                background-color: #87d068;
                border-radius: 3px;
                color: #fff;
                font-size: 10px;
                position: absolute;
                right: 5px;
                top: 7px;
                line-height: 19px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
              }
            }

            .active_video_item {
              border-color: #7af3ff;

              & .play_icon {
                opacity: 1;
                z-index: 99;
                color: #7af3ff;
              }
            }
          }
        }

        // 选择框
        .selection_and_operation {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24px;
          padding-bottom: 14px;
          border-bottom: 1px solid rgba(28, 31, 35, 0.08);

          .left_content {
            display: flex;
            align-items: center;
          }

          .right_content {
            display: flex;
            align-items: center;
            gap: 10px;

            .select_num {
              color: #1759dd;
            }

            .right_content_btn {
              border-radius: 4px;
              overflow: hidden;
            }
          }
        }

        // 筛选框
        .filter_box {
          display: flex;
          justify-content: space-between;
          // justify-content: flex-end;
          .filter_item {
            display: flex;
            align-items: center;

            .filter_title {
              padding: 3px 5px;
              width: 90px;
              font-size: 14px;
              color: #1c1f2399;
            }

            .select_item_box {
              display: flex;
              align-items: center;

              .select_item {
                cursor: pointer;
                margin-right: 10px;
                padding: 8px 14px;
                font-size: 14px;
                color: #1c1f2399;

                &:hover {
                  background-color: var(--ss-tag-bgc-color);
                }
              }

              // 高亮选中
              .active_select {
                background-color: var(--ss-tag-bgc-color);
                // color: #1c1f23;
                color: var(--ss-primary-color);
                font-weight: 600;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}

.horver_box {
  display: flex;
  width: 325px;
  flex-wrap: wrap;

  .horver_item {
    width: 60px;
    height: 100px;
    margin-right: 5px;
    background-color: #000;
    display: flex;
    justify-content: center;
  }
}

.ant-popover-inner {
  background-color: #999 !important;
}

.Text_back {
  color: red;
  margin-left: 10px;
  cursor: pointer;
}

.Text_back_btn {
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
}

.video_img_cartss {
  transition: all 0.2s ease 0s;
  border-radius: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.bg-b {
  background-color: #000;
  width: 100%;
  height: 100%;
}

.tuijian_box{
  // margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 40px;
  .tuijian_box_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-bottom: 5px;
    .left {
      display: flex;
      align-items: center;
      .left_content{
        display: flex;
      align-items: center;
      }
     .left_content_s{
        display: flex;
      align-items: center;
      cursor: pointer;
      }
      .left_name {
        margin-right: 10px;
      }
    }
  }
}

.numberFontSize{
  font-weight: bolder;
}
</style>
